<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>走马灯</title>
    <style>
        *{padding:0; margin:0; list-style:none; border:0;}
        body{ background:#000;}
        .all{
            width:620px;
            height:465px;
            border:1px solid #000;
            margin:100px auto;
            overflow:hidden;
            position:relative;
        }
        .all ul{
            width:1860px;
            height:465px;
            position:absolute;
            left:0;
            top:0;
        }
        .all li{
            float:left;
            cursor:pointer;
        }
    </style>
    <script>
        window.onload=function(){
            var box=document.getElementById('box');
            var num=0;
            var timer=null;
            function autoplay(){
                timer=setInterval(function(){      //每隔30毫秒执行一次这个函数
                    num-=5;                           //重新给num赋值
                    if(num<-1240){num=0}           //第四张图片从左边消失时，给num赋值为0
                    box.style.left=num+'px'       //ul的left值通过num定义
                },30)
            };
            autoplay();
            box.onmouseover=function(){           //鼠标移入关闭定时器
                clearInterval(timer)
            }
            box.onmouseout=function(){           //鼠标移出开启定时器
                autoplay()
            }
        }

    </script>
<body>
<div class="all" >
    <ul id="box">
        <li><img src="images/04.jpg"/></li>
        <li><img src="images/05.jpg"/></li>
        <li><img src="images/06.jpg"/></li>
        <li><img src="images/07.jpg"/></li>
        <li><img src="images/04.jpg"/></li>
        <li><img src="images/05.jpg"/></li>
    </ul>
</div>
</body>
</html>